<!--
 * @Author: your name
 * @Date: 2021-08-11 19:49:18
 * @LastEditTime: 2021-08-17 13:51:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \项目\网易考拉案例\recharge.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充值页面</title>
    <link rel="stylesheet" href="./css/commit.css">
    <link rel="stylesheet" href="./css/index-motherboard.css">
    <link rel="stylesheet" href="./css/style.css">
    <!-- <link rel="stylesheet" href="./css/new.css"> -->
    <link rel="stylesheet" href="./fonts/font图标/iconfont.css">
    <link rel="stylesheet" href="./css/recharge.css">
</head>

<body>
    <!-- 网易考拉项目的header开始 -->
    <header>
        <!-- header当中的黑色导航栏 -->
        <div class="div-black">
            <nav class="nav-black">
                <!-- 黑色导航栏的左侧标签和链接 -->
                <div class="nav-black-left">
                    <span>考拉欢迎你!</span>
                    <a href="./login.html">登录</a>
                    <a href="./login.html">免费注册</a>
                    <a href="#">手机考拉</a>
                </div>
                <!-- 黑色导航栏的右侧标签和链接 -->
                <ul class="nav-black-right">
                    <li><a href="./daily check-in.html">每日签到</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="./personal  center.html">个人中心</a></li>
                    <li><a href="#">客户服务</a></li>
                    <li><a href="#">充值中心</a></li>
                    <li><a href="./consumers rights.html">消费者权益</a></li>
                    <li><a href="#">更多</a></li>
                    <li><a href="#">视频内容</a></li>
                </ul>
            </nav>
        </div>
        <!-- header中的第二个盒子的设置，主要是logo和搜索栏 -->
        <div class="box w">
            <div class="box-logo">
                <a href="#"><img src="./images/网易考拉logo.png" alt="网易考拉logo"></a>
            </div>
            <div class="box-search">
                <input type="text" placeholder="口红">
                <button><i class="iconfont icon-ai219"></i></button>
            </div>
            <div class="box-shopping-car">
                <button><i class="iconfont icon-gouwuche1"></i> 购物车</button>
            </div>
        </div>
        <!-- header中的第二个盒子结束了 -->
        <div class="nav-red">
            <div class="nav-red-one">
                <i class="iconfont icon-ziyuan114"></i>
                <p> 所有分类
                    <ul class="menu">
                        <li><i class="iconfont icon-xiangshui"></i>
                            <a href="#">美容美妆</a>
                        </li>
                        <li><i class="iconfont icon-gouwuche"></i>
                            <a href="#">母婴儿童</a>
                        </li>
                        <li><i class="iconfont icon-changyongicon-"></i>
                            <a href="#">营养保健</a>
                        </li>
                        <li><i class="iconfont icon-xiangji"></i>
                            <a href="#">数码家电</a>
                        </li>
                        <li><i class="iconfont icon-qingjie1-copy"></i>
                            <a href="#">个护家清</a>
                        </li>
                        <li><i class="iconfont icon-yijia"></i>
                            <a href="#">服饰鞋靴</a>
                        </li>
                        <li><i class="iconfont icon-zhinanzhendaohang"></i>
                            <a href="#">运动户外</a>
                        </li>
                        <li><i class="iconfont icon-shizhong"></i>
                            <a href="#">手表配饰</a>
                        </li>
                        <li><i class="iconfont icon-bao"></i>
                            <a href="#">轻奢</a>
                        </li>
                        <li><i class="iconfont icon-shafa"></i>
                            <a href="#">家具生活</a>
                        </li>
                        <li><i class="iconfont icon-hanbao"></i>
                            <a href="#">环球美食</a>
                        </li>
                        <li><i class="iconfont icon-chongwutubiao04"></i>
                            <a href="#">宠物生活</a>
                        </li>
                    </ul>
                </p>
            </div>
            <div class="nav-red-two">
                <ul>
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./oversea.html">海外直购</a></li>
                    <li><a href="./purchased product.html">考拉海购出品</a></li>
                    <li><a href="./milk powder.html">品质奶粉</a></li>
                    <li><a href="./the mask.html">人气面膜</a></li>
                    <li><a href="./recharge.html" style="color: #ff0e20;">充值</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class=Div1>
        <div class="fix">
            <ul class="iconfont">
                <div>
                    <li><i class="iconfont icon-qizhi"></i></li>
                    <P>签到</P>
                </div>

                <div>
                    <hr>
                    <li><i class="iconfont icon-gouwuche"></i></li>
                    <p>购物车</p>
                </div>
                <hr>

                <div>
                    <li><i class="iconfont  icon-shouji"></i></li>
                    <p>APP</p>

                </div>
                <hr>
                <div>
                    <li><i class="iconfont icon-xiangshang1"></i></li>
                    <p>TOP</p>

                </div>

            </ul>
        </div>
        <!-- section部分 -->
        <div class=one>
            <!-- 第一个盒子充值选项内容 -->
            <div class=one1>
                <div class=div1>充话费</div>
                <div class=div2>充流量</div>
                <div class=div3>App Store充值卡</div>
            </div>
            <!-- 第二个盒子充值号码内容 -->
            <div class=one2>
                <div class=div4>充值号码</div>
                <div class=div5><input type="text" name="" placeholder="请输入要充值的手机号码" required pattern="1\d{10}" autofocus class=div6></div>
            </div>
            <!-- 第三个盒子充值面额内容 -->
            <div class=one3>
                <div class=di>充值面额</div>
                <!-- 第一行四个框 -->
                <div class=one4>
                    <div class=div9>10元</div>
                    <div class=div8>20元</div>
                    <div class=div8>30元</div>
                    <div class=div8>50元</div>


                </div>
                <!-- 第二行四个框 -->
                <div class=one5>
                    <div class=div10>100元</div>
                    <div>200元</div>
                    <div>300元</div>
                    <div>500元</div>


                </div>
            </div>
            <!-- 第四个盒子内容 -->
            <div class=one6>
                <span class=span1>销售价格</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span class=span2>10.00 </span> <span class=span3>元</span>

            </div>
            <!-- 第五个盒子内容 -->
            <div class=one7><button>立即充值</button>
                <div class=pay>（确保输入正确的手机号，充错号将无法退款）</div>
            </div>
            <div class=question>
                <!-- 第六个盒子内容 -->
                <div><span class=question1>常见问题</span>
                    <div class=question2><a href="">更多问题></a></div>
                </div>

            </div>
            <br>
            <br>
            <!-- 第七个盒子文字内容 -->
            <div class=text>
                <h5> 1 话费流量充值多久能到账？</h5>


                <p>
                    一般情况下，话费流量充值会在30分钟内到账，少数情况下以及充值高峰期，由于运营商或者网络原因，可能延迟24-48小时到账属于正常范围。
                </p>
                <br>
                <h5>2 话费充值是否支持开发票？</h5>
                <p>话费充值业务发票是由运营商提供，用户充值成功后，可到当地运营商营业厅打印上月的实际消费发票。因各运营商的规定不同，充值前请咨询当地营业厅关于发票获取的政策，或拨打运营商客服电话咨询，或拨打充值平台客服电话咨询。考拉海购平台目前的电信话费充值和移动联通部分地区话费充值为卡直充，运营商不提供话费充值发票，由考拉海购联系第三方商家提供定额发票（不保证提供对应运营商和地区的发票）。</p>
                <br>
                <h5>3 考拉话费充值能参加运营商活动吗？</h5>
                <p>考拉话费充值不保证能参加运营商活动，具体情况请仔细查阅运营商发布的活动说明。</p>
            </div>

        </div>

    </div>

    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="a1">
            <div>
                <i class="iconfont icon-zheng1"></i>
                <p>正品承诺</p>
                <p>正品保障 假一赔十</p>
            </div>
            <div>
                <i class="iconfont icon-di"></i>
                <p>低价保障</p>
                <p>缩减中间环节 确保低价</p>
            </div>
            <div>
                <i class="iconfont icon-iconfontzhizuobiaozhun34"></i>
                <p>30天无忧退货</p>
                <p>国内退货 售后无忧</p>
            </div>
            <div>
                <i class="iconfont icon-youjian"></i>
                <p>满88包邮</p>
                <p>部分特殊商品除外</p>
            </div>
        </div>
        <div class="a2">
            <div>
                <img src="./images/网易考拉logo.png" alt="error" />
                <a href="#">关于我们
                    <i class="iconfont icon-weibo"></i>
                <i class="iconfont icon-weixin"></i></a>
                <ul>
                    <li>
                        考拉保障
                        <ul>
                            <li>假一赔十</li>
                            <li>廉政举报</li>
                            <li>&nbsp;</li>
                            <li>&nbsp;</li>
                        </ul>
                    </li>
                    <li>
                        新手指南
                        <ul>
                            <li>购物流程</li>
                            <li>支付方式</li>
                            <li>通关税费</li>
                            <li>常见问题</li>
                        </ul>
                    </li>
                    <li>
                        售后服务
                        <ul>
                            <li>售后政策</li>
                            <li>退货流程</li>
                            <li>特色服务</li>
                            <li>联系客服</li>
                        </ul>
                    </li>
                    <li>
                        物流配送
                        <ul>
                            <li>配送方式</li>
                            <li>配送服务</li>
                            <li>运费标准</li>
                            <li>物流跟踪</li>
                        </ul>
                    </li>
                    <li>
                        商家服务
                        <ul>
                            <li>招商合作</li>
                            <li>销售联盟</li>
                            <li>商家成长</li>
                            <li>&nbsp;</li>
                        </ul>
                    </li>
                    <li>
                        关于我们
                        <ul>
                            <li>联系我们</li>
                            <li>CEO邮箱</li>
                            <li>&nbsp;</li>
                            <li>&nbsp;</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div>
                <img src="./images/popularity/二维码.png" alt="error" />
                <p>扫描下载手机版</p>
            </div>
        </div>
        <div class="a3">
            <img src="./images/popularity/footer.jpg" alt="error" />
        </div>
    </div>

</body>

</html>